import React, { useEffect } from 'react';
import Maps from './maps.js';

const myMap = new Maps()

const MapShow = function () {
    useEffect(() => {
        let mapInfo = {
            appCoordinate: "2",
            id: 1,
            isDelete: false,
            layers: "",
            mapBaseParam:
                "[{\"url\":\"http://t0.tianditu.gov.cn/img_c/wmts?tk=680ebbd5177da6cad70f6073d096d911\",\"layer\":\"img\",\"name\":\"影像\",\"matrixSet\":\"c\",\"layerType\":\"\",\"resolutions\":\"\",\"origin\":\"-180,90\",\"matrixIds\":\"\",\"tileSize\":\"\",\n\"code\":\"EPSG:4490\",\"defs\":\"\",\"extent\":\"-180,-90,180,90\",\"units\":\"degrees\",\"format\":\"tiles\",\"style\":\"\"},{\"url\":\"http://t0.tianditu.gov.cn/cia_c/wmts?tk=680ebbd5177da6cad70f6073d096d911\",\"layer\":\"cia\",\n\"name\":\"影像\",\"matrixSet\":\"c\",\"layerType\":\"\",\"resolutions\":\"\",\"origin\":\"-180,90\",\"matrixIds\":\"\",\"tileSize\":\"\",\"code\":\"EPSG:4490\",\"defs\":\"\",\"extent\":\"-180,-90,180,90\",\"units\":\"degrees\",\"format\":\n\"tiles\",\"style\":\"\"},{\"url\":\"http://t0.tianditu.gov.cn/vec_c/wmts?tk=680ebbd5177da6cad70f6073d096d911\",\"layer\":\"vec\",\"name\":\"街道\",\"matrixSet\":\"c\",\"layerType\":\"\",\"resolutions\":\"\",\"origin\":\"-180,90\",\n\"matrixIds\":\"\",\"tileSize\":\"\",\"code\":\"EPSG:4490\",\"defs\":\"\",\"extent\":\"-180,-90,180,90\",\"units\":\"degrees\",\"format\":\"tiles\",\"style\":\"\"},{\"url\":\"http://t0.tianditu.gov.cn/cva_c/wmts?tk=680ebbd5177da6cad70f6073d096d911\"\n,\"layer\":\"cva\",\"name\":\"街道\",\"matrixSet\":\"c\",\"layerType\":\"\",\"resolutions\":\"\",\"origin\":\"-180,90\",\"matrixIds\":\"\",\"tileSize\":\"\",\"code\":\"EPSG:4490\",\"defs\":\"\",\"extent\":\"-180,-90,180,90\",\"units\":\"degrees\",\n\"format\":\"tiles\",\"style\":\"\"},{\"url\":\"http://t0.tianditu.gov.cn/ter_c/wmts?tk=680ebbd5177da6cad70f6073d096d911\",\"layer\":\"ter\",\"name\":\"地形\",\"matrixSet\":\"c\",\"layerType\":\"\",\"resolutions\":\"\",\"origin\":\"-180,90\",\n\"matrixIds\":\"\",\"tileSize\":\"\",\"code\":\"EPSG:4490\",\"defs\":\"\",\"extent\":\"-180,-90,180,90\",\"units\":\"degrees\",\"format\":\"tiles\",\"style\":\"\"},{\"url\":\"http://t0.tianditu.gov.cn/cta_c/wmts?tk=680ebbd5177da6cad70f6073d096d911\"\n,\"layer\":\"cta\",\"name\":\"地形\",\"matrixSet\":\"c\",\"layerType\":\"\",\"resolutions\":\"\",\"origin\":\"-180,90\",\"matrixIds\":\"\",\"tileSize\":\"\",\"code\":\"EPSG:4490\",\"defs\":\"\",\"extent\":\"-180,-90,180,90\",\"units\":\"degrees\",\"format\":\n\"tiles\",\"style\":\"\"}]",
            mapCoordinate: "2",
            mapDefaultCenter: "120.01284688555289,30.40903989508352",
            mapDefaultLayers: "",
            mapDefaultZoom: 10,
            mapMaxZoom: 18,
            mapMinZoom: 8,
            mapType: "OL4",
            mapUrl: "https://webapi.amap.com/maps?v=1.4.15&key=8b523711fc7e38a3730786e8dd36d8a0&plugin=AMap.CircleEditor,AMap.PolyEditor,AMap.MouseTool,AMap.RangingTool,AMap.Heatmap",
            name: "mapOL",
            positionId: 0,
            sortIndex: 0,
            updateTime: "2022-11-23 11:52:01"
        }
        if (!myMap.map) {
            mapInfo && myMap.mapInit({
                mapType: mapInfo.mapType,
                mapBaseParam: JSON.parse(mapInfo.mapBaseParam),
                mapInfo: mapInfo,
                target: "main-map"
            });
        }

        let areaList = [[119.66197103106072, 30.406979958560083], [119.76496785723259, 30.427579323794458], [119.86659139238884, 30.430325905825708], [119.95036214434197, 30.426206032778833], [120.17695516192009, 30.411099831606958], [120.23463338457634, 30.283383767153833], [120.24012654863884, 30.222958962466333], [120.19206136309197, 30.173520485903833], [120.13575643145134, 30.118588845278833], [119.93388265215447, 30.148801247622583], [119.80342000567009, 30.198239724185083], [119.71003621660759, 30.284757058169458], [119.65785115801384, 30.349301735903833], [119.66197103106072, 30.406979958560083]]

        myMap.addSvgPolygons({
            layerId: 'animate-area',
            pointList: areaList
        })
    }, [])

    return (
        <div className="map-show">
            <div id="main-map" />
        </div>
    )
}

export default MapShow